<template>
  <div class="whole">
    <div class="gs-hd">
        <div class="gs-header">
            <div class="gs-logo"><a href="/" title="古诗词网">古诗词网</a></div>
            <div class="gs-nav" id="gs-sidr">
                <ul>
                    <li><a href="/" class="on">推荐</a></li>
                    <li><a href="/poetry/">诗文</a></li>
                    <li><a href="/mingju/">名句</a></li>
                    <li><a href="/poets/">诗人</a></li>
                    <li><a href="/guwen/">古籍</a></li>
                    <li><a href="#/myCollect/">收藏</a></li>
                    <li><a href="#/login">{{userinfo.userName?userinfo.userName:'登录>'}}</a></li>

                </ul>
            </div>
            <div class="gs-login" id="show_userinfo"></div>
            <div class="gs-search" id="gs-searchform">
                    <input type="hidden" name="tbname" value="article">
                    <input type="hidden" name="show" value="title,writer">
                    <input type="hidden" name="tempid" value="1">
                    <input type="text" v-model="keyword"  id="keys" class="search_input" placeholder="请输入诗词或作者"
                        x-webkit-speech="">
                    <button  @click="search()" class="search_btn" value="搜索"/>
            </div>
            <span href="#sidr-right" id="simple-menu"></span>
        </div>
    </div>
    <div class="gs-home-istop">
        <div class="gs-hot-tag">
            <a href="/gushi/songcisanbaishou/">宋词三百首</a>
            <a href="/gushi/tangshisanbaishou/">唐诗三百首</a>
            <a href="/gushi/gushisanbaishou/">古诗三百首</a>
            <a href="/gushi/songcijingxuan/">宋词精选</a>
            <a href="/gushi/guwenguanzhi/">古文观止</a>
            <a href="/gushi/yuefu/">乐府</a>
            <a href="/gushi/shijing/">诗经</a>
            <a href="/gushi/chuzhonggushi/">初中古诗</a>
            <a href="/gushi/xiaoxuegushi/">小学古诗</a>
            <a href="/gushi/chuci/">楚辞</a>
            <a href="/gushi/gaozhonggushi/">高中古诗</a>
            <a href="/gushi/gushishijiushou/">古诗十九首</a>
        </div>
    </div>

    <div class="gs-isgood">

        <div class="gs-isgood-title">
            <h2>今日推荐</h2>
            <div class="r"><a id="gs-update-home" class="gs-top-entry" href="javascript:updateHome();"><span>换一组</span></a>
            </div>
        </div>

        <ul class="gs-isgood-ul">

            <li class="gs-isgood-li">
                <h3><a href="/poetry/410023.html">六月二十七日望湖楼醉书</a></h3>
                <p class="gs-isgood-source">
                    <a href="/songdai/" class="gs-isgood-dynsty">宋代</a>： <a href="/poets/10061.html"
                        class="gs-isgood-author">苏轼</a>
                </p>
                <div class="gs-isgood-introduuce">
                    <p>黑云翻墨未遮山，白雨跳珠乱入船。</p>
                    <p>卷地风来忽吹散，望湖楼下水如天。</p>
                </div>
            </li>
            <li class="gs-isgood-li">
                <h3><a href="/poetry/278704.html">琵琶行</a></h3>
                <p class="gs-isgood-source">
                    <a href="/mingdai/" class="gs-isgood-dynsty">明代</a>： <a href="/poets/14213.html"
                        class="gs-isgood-author">胡应麟</a>
                </p>
                <div class="gs-isgood-introduuce">
                    <p>李将军，虬髯戟列横秋冥。当关壁立万夫勇，扫空大漠无王庭。</p>
                    <p>一朝谢事东海上，皓首华颠气逾王。醉归叱咤灞陵尉，长揖嫖姚不相让。</p>
                </div>
            </li>
            <li class="gs-isgood-li">
                <h3><a href="/poetry/168729.html">送友人入蜀</a></h3>
                <p class="gs-isgood-source">
                    <a href="/tangdai/" class="gs-isgood-dynsty">唐代</a>： <a href="/poets/2873.html"
                        class="gs-isgood-author">李频</a>
                </p>
                <div class="gs-isgood-introduuce">
                    <p>天际蜀门开，西看举别杯。何人不异礼，上客自怀才。</p>
                    <p>夜涧青林发，秋江渌水来。临邛行乐处，莫到白头回。</p>
                </div>
            </li>

        </ul>
    </div>

    <div class="gs-main">
        <div class="gs-content">
            <div class="gs-sons" v-for="(item,index) in shiList" :key="index">
                <div class="gs-cont">
                    <div class="gs-cont-title">
                        <h3><a href="/poetry/406513.html">{{ item.title  }}</a></h3>
                    </div>
                    <div class="gs-cont-service" data-id="406513">
                        <div class="gs-poem-sub">
                            <a href="/songdai/" class="gs-service-dynsty">{{ item.dynasty  }}</a>
                            ： <a href="/poets/9975.html" class="gs-service-author">{{ item.author  }}</a>
                        </div>
                        <div class="gs-service-tab">
                            <span title="拼音"><a href="/poetry/pinyin-406513.html">拼</a></span>
                            <span title="翻译"><a href="/poetry/fanyi-406513.html">译</a></span>
                            <span id="4065132" onclick="setTab('406513',2)">繁</span>
                            <span id="4065131" onclick="setTab('406513',1)">原</span>
                        </div>
                    </div>
                    <div class="gs-works-text">
                        <div id="gs_conview_406513_1" class="gs-conview-def">
                            {{ item.content  }}
                        </div>
                        <div id="gs_conview_406513_2" class="gs-conview-ft" style="display:none"></div>
                    </div>
                </div>
                <div class="tool">
                    <div class="l">
                        <i @click="collect(item.id)" class="sc" data-id="88888" data-clid="4" data-type="shoucang" title="收藏"></i>
                        <i class="fz" data-id="406513" data-clid="4" title="复制"></i>
                        <i class="ld" data-id="406513" title=""></i>
                        <p v-show="false" id="gs-play-406513"> </p>
                    </div>
                    <div class="r"><i class="zan" data-id="406513" data-clid="4" title="赞">赞<span id="diggnum406513">
                            </span> </i></div>
                </div>
                <div class="gs-tag">
                   <a href='/gushi/liqing/'>诗词</a>
                </div>
            </div>

            <PageBar class="page-bar"
            :totalPage="Math.ceil(total_count/page_size)"
            :defaultPage="page_index"
            v-on:onPage="selectPage"
            v-on:onOpenAll="onOpenAll" />
        </div><!--gs-content -->

        <div class="gs-sidebar">

            <div class="sidebar-box b-b">
                <div class="title"><a href="/poetry/">古诗</a></div>
                <div class="sidebar-tag">
                    <a href="/gushi/shuqing/">抒情</a>
                    <a href="/gushi/xiejing/">写景</a>
                    <a href="/gushi/xieren/">写人</a>
                    <a href="/gushi/shanshui/">山水</a>
                    <a href="/gushi/yongwu/">咏物</a>
                    <a href="/gushi/wanyue/">婉约</a>
                    <a href="/gushi/chuntian/">春天</a>
                    <a href="/gushi/songbie/">送别</a>
                    <a href="/gushi/qiutian/">秋天</a>
                    <a href="/gushi/libie/">离别</a>
                    <a href="/gushi/aiqing/">爱情</a>
                    <a href="/gushi/sixiang/">思乡</a>
                    <a href="/gushi/aiguo/">爱国</a>
                    <a href="/gushi/huaigu/">怀古</a>
                    <a href="/gushi/zheli/">哲理</a>
                    <a href="/gushi/jieri/">节日</a>
                    <a href="/gushi/youqing/">友情</a>
                    <a href="/gushi/biansai/">边塞</a>
                    <a href="/gushi/guiyuan/">闺怨</a>
                    <a href="/gushi/zhanzheng/">战争</a>
                    <a href="/gushi/meihua/">梅花</a>
                    <a href="/gushi/haofang/">豪放</a>
                    <a href="/gushi/tianyuan/">田园</a>
                    <a href="/gushi/yueliang/">月亮</a>
                    <a href="/gushi/xiatian/">夏天</a>
                    <a href="/gushi/xue/">雪</a>
                    <a href="/gushi/lizhi/">励志</a>
                    <a href="/gushi/dongtian/">冬天</a>
                    <a href="/gushi/zhongyang/">重阳</a>
                    <a href="/gushi/daowang/">悼亡</a>
                    <a href="/gushi/zhongqiu/">中秋</a>
                    <a href="/gushi/qixi/">七夕</a>
                    <a href="/gushi/hehua/">荷花</a>
                    <a href="/gushi/yuanxiaojie/">元宵节</a>
                    <a href="/gushi/hanshijie/">寒食节</a>
                    <a href="/gushi/diming/">地名</a>
                    <a href="/gushi/qingmingjie/">清明节</a>
                    <a href="/gushi/chunjie/">春节</a>
                    <a href="/gushi/juhua/">菊花</a>
                    <a href="/gushi/duanwujie/">端午节</a>
                    <a href="/gushi/huanghe/">黄河</a>
                    <a href="/gushi/xishi/">惜时</a>
                    <a href="/gushi/dushu/">读书</a>
                    <a href="/gushi/ertong/">儿童</a>
                    <a href="/gushi/minyao/">民谣</a>
                    <a href="/gushi/youmin/">忧民</a>
                    <a href="/gushi/changjiang/">长江</a>
                    <a href="/gushi/muqin/">母亲</a>
                    <a href="/gushi/laoshi/">老师</a>
                    <a href="/gushi/xiofeng/">写风</a>
                    <a href="/gushi/xioshan/">写山</a>
                    <a href="/poetry/">更多&gt;&gt;</a>
                </div>
            </div>

            <div class="sidebar-box b-b">
                <div class="title"><a href="/poets/">作者</a></div>
                <div class="sidebar-tag">
                    <a href="/poets/21758.html">纳兰性德</a>
                    <a href="/poets/21672.html">郑燮</a>
                    <a href="/poets/10927.html">白朴</a>
                    <a href="/poets/10917.html">马致远</a>
                    <a href="/poets/10067.html">王安石</a>
                    <a href="/poets/10063.html">黄庭坚</a>
                    <a href="/poets/10061.html">苏轼</a>
                    <a href="/poets/10060.html">杨万里</a>
                    <a href="/poets/10059.html">刘克庄</a>
                    <a href="/poets/10058.html">陆游</a>
                    <a href="/poets/10056.html">欧阳修</a>
                    <a href="/poets/10054.html">朱熹</a>
                    <a href="/poets/10052.html">陈著</a>
                    <a href="/poets/10028.html">辛弃疾</a>
                    <a href="/poets/10025.html">张孝祥</a>
                    <a href="/poets/10021.html">秦观</a>
                    <a href="/poets/10016.html">吴潜</a>
                    <a href="/poets/9992.html">刘辰翁</a>
                    <a href="/poets/9979.html">范仲淹</a>
                    <a href="/poets/9975.html">晏殊</a>
                    <a href="/poets/9965.html">吴文英</a>
                    <a href="/poets/9952.html">晏几道</a>
                    <a href="/poets/9934.html">朱敦儒</a>
                    <a href="/poets/9926.html">柳永</a>
                    <a href="/poets/9924.html">周邦彦</a>
                    <a href="/poets/9837.html">程垓</a>
                    <a href="/poets/9796.html">贺铸</a>
                    <a href="/poets/9737.html">李清照</a>
                    <a href="/poets/9509.html">周敦颐</a>
                    <a href="/poets/9464.html">文天祥</a>
                    <a href="/poets/9396.html">岳飞</a>
                    <a href="/poets/2964.html">李煜</a>
                    <a href="/poets/2938.html">陆龟蒙</a>
                    <a href="/poets/2937.html">韦应物</a>
                    <a href="/poets/2936.html">李商隐</a>
                    <a href="/poets/2935.html">元稹</a>
                    <a href="/poets/2933.html">刘禹锡</a>
                    <a href="/poets/2932.html">齐己</a>
                    <a href="/poets/2931.html">李白</a>
                    <a href="/poets/2930.html">白居易</a>
                    <a href="/poets/2929.html">杜甫</a>
                    <a href="/poets/2928.html">张籍</a>
                    <a href="/poets/2927.html">姚合</a>
                    <a href="/poets/2925.html">许浑</a>
                    <a href="/poets/2923.html">杜牧</a>
                    <a href="/poets/2922.html">皎然</a>
                    <a href="/poets/2921.html">刘长卿</a>
                    <a href="/poets/2919.html">贯休</a>
                    <a href="/poets/2918.html">贾岛</a>
                    <a href="/poets/2917.html">温庭筠</a>
                    <a href="/poets/2916.html">孟郊</a>
                    <a href="/poets/2914.html">王维</a>
                    <a href="/poets/2913.html">韩愈</a>
                    <a href="/poets/2912.html">王建</a>
                    <a href="/poets/2911.html">钱起</a>
                    <a href="/poets/2910.html">岑参</a>
                    <a href="/poets/2909.html">罗隐</a>
                    <a href="/poets/2908.html">郑谷</a>
                    <a href="/poets/2907.html">杜荀鹤</a>
                    <a href="/poets/2906.html">方干</a>
                    <a href="/poets/2905.html">孟浩然</a>
                    <a href="/poets/2904.html">戴叔伦</a>
                    <a href="/poets/2903.html">权德舆</a>
                    <a href="/poets/2902.html">韩偓</a>
                    <a href="/poets/2901.html">皮日休</a>
                    <a href="/poets/2899.html">张祜</a>
                    <a href="/poets/2898.html">韦庄</a>
                    <a href="/poets/2897.html">皇甫冉</a>
                    <a href="/poets/2892.html">张乔</a>
                    <a href="/poets/2891.html">张说</a>
                    <a href="/poets/2890.html">吴融</a>
                    <a href="/poets/2889.html">卢纶</a>
                    <a href="/poets/2888.html">李峤</a>
                    <a href="/poets/2886.html">王昌龄</a>
                    <a href="/poets/2885.html">顾况</a>
                    <a href="/poets/2884.html">宋之问</a>
                    <a href="/poets/2883.html">高适</a>
                    <a href="/poets/2882.html">司空图</a>
                    <a href="/poets/2881.html">李端</a>
                    <a href="/poets/2879.html">赵嘏</a>
                    <a href="/poets/2878.html">柳宗元</a>
                    <a href="/poets/2870.html">张九龄</a>
                    <a href="/poets/2869.html">李贺</a>
                    <a href="/poets/2850.html">韩翃</a>
                    <a href="/poets/2849.html">马戴</a>
                    <a href="/poets/2814.html">王勃</a>
                    <a href="/poets/2693.html">贺知章</a>
                    <a href="/poets/390.html">郦道元</a>
                    <a href="/poets/307.html">陶渊明</a>
                    <a href="/poets/131.html">屈原</a>
                    <a href="/poets/130.html">左丘明</a>
                    <a href="/poets/104.html">司马迁</a>
                    <a href="/poets/102.html">曹操</a>
                    <a href="/poets/99.html">曹植</a>
                    <a href="/poets/86.html">诸葛亮</a>
                    <a href="/poets/72.html">卓文君</a>
                    <a href="/poets/">更多&gt;&gt;</a>
                </div>
            </div>

            <div class="sidebar-box b-b">
                <div class="title"><a href="/guwen/">典籍</a></div>
                <div class="sidebar-tag">
                    <a href="/guwen/lunheng/">论衡</a>
                    <a href="/guwen/yili/">仪礼</a>
                    <a href="/guwen/wuzi/">吴子</a>
                    <a href="/guwen/zhouli/">周礼</a>
                    <a href="/guwen/jiangyuan/">将苑</a>
                    <a href="/guwen/liezi/">列子</a>
                    <a href="/guwen/hanshu/">汉书</a>
                    <a href="/guwen/guanzi/">管子</a>
                    <a href="/guwen/xiaojing/">孝经</a>
                    <a href="/guwen/mozi/">墨子</a>
                    <a href="/guwen/shangshu/">尚书</a>
                    <a href="/guwen/xunzi/">荀子</a>
                    <a href="/guwen/zhinangshualu/">智囊(选录)</a>
                    <a href="/guwen/liutao/">六韬</a>
                    <a href="/guwen/sushu/">素书</a>
                    <a href="/guwen/liji/">礼记</a>
                    <a href="/guwen/yichuan/">易传</a>
                    <a href="/guwen/fanjing/">反经</a>
                    <a href="/guwen/zhongyong/">中庸</a>
                    <a href="/guwen/zuochuan/">左传</a>
                    <a href="/guwen/bingjian/">冰鉴</a>
                    <a href="/guwen/laozi/">老子</a>
                    <a href="/guwen/14/">大学章句集注</a>
                    <a href="/guwen/zhuangzi/">庄子</a>
                    <a href="/guwen/mengzi/">孟子</a>
                    <a href="/guwen/lunyu/">论语</a>
                    <a href="/guwen/zhouyi/">周易</a>
                    <a href="/guwen/shiji/">史记</a>
                    <a href="/guwen/">更多&gt;&gt;</a>
                </div>
            </div>

        </div>
    </div>
    <div id="bdtts_div"></div>
  </div>
</template>

<style scoped>
    @import './css/style.css';
</style>

<script>
import axios from 'axios';
import PageBar from "@/components/PageBar";
import { getCacheUserInfo, clearCacheUserInfo } from "@/utils/token";
import { Toast } from "mint-ui";
import {collect} from "@/api/collect";

export default {
  data() {
    return {
      shiList: [],
      page_index: 0,
      page_size: 20,
      total_count: 20000,
      startOffset: 0,
      endOffset: 0,
      userinfo: {},
      keyword : ''
    };
  },
  components: {PageBar},
  async created() {
        this.refresh();
  },
  methods: {
     showPage() {
      this.refresh();

    },
     refresh() {
      let keyword = this.keyword;
      this.userinfo = getCacheUserInfo().userinfo;
      let page_index = this.page_index;
      axios.get('/shi/poetry/list?pageNo='+page_index+'&author='+keyword).then((res)=>{
        this.shiList = res.data.data
      })
      //alert('yoghurt'+this.userinfo['userName']);
      //alert(Object.keys(this.userinfo));
    },
    selectPage(index) {
        this.page_index = index;
        this.refresh();
    },
    onOpenAll(total) {
        this.refresh();    
    },
    collect(id){
        let userid = this.userinfo.id;
        let param = {
            userId:userid,
            poemId:id    
        };
        collect(param);
    },
    search(){
        let keyword = this.keyword;
        let page_index = this.page_index;
        axios.get('/shi/poetry/search?pageNo='+page_index+'&keyword='+keyword).then((res)=>{
        this.shiList = res.data.data
      })
    }
  },
};
</script>
